<template>
    <div>
        <el-card shadow="never" class="!border-none">
            <el-page-header content="用户详情" @back="$router.back()" />
        </el-card>

        <el-card
            shadow="never"
            class="mt-[20px] card !border-none"
            :body-style="{ padding: '20px 0px' }"
        >
            <template #header>
                <span class="font-22 black f-w-500">基本信息</span>
            </template>

            <div class="header flex">
                <div>
                    <div class="mb-[10px] ml-[15px] text-tx-regular">用户头像</div>
                    <el-image
                        style="width: 80px; height: 80px; border-radius: 50%"
                        :src="userInfo.avatar"
                        :preview-src-list="[userInfo.avatar]"
                        :fit="'cover'"
                    >
                    </el-image>
                </div>
                <div class="header--item">
                    <div class="text-tx-regular">钱包金额</div>
                    <div class="mt-[24px] flex items-center">
                        <span class="mr-[10px]">{{ userInfo.userMoney }}</span>

                        <el-button
                            link
                            type="primary"
                            @click="adjustBalance(userInfo.userMoney, userInfo.id)"
                            v-perms="['user:money:update']"
                            >调整</el-button
                        >
                    </div>
                </div>
                <div class="header--item">
                    <div class="text-tx-regular">剩余积分</div>
                    <div class="mt-[24px] flex items-center">
                        <span class="mr-[10px]">{{ userInfo.userPoints || 0 }}</span>

                        <el-button
                            link
                            type="primary"
                            @click="adjustIntegral(userInfo.userPoints, userInfo.id)"
                            v-perms="['user:points:update']"
                            >调整</el-button
                        >
                    </div>
                </div>

                <div class="header--item">
                    <div class="text-tx-regular">优惠券</div>
                    <div class="mt-[24px] flex items-center">
                        <span class="mr-[10px]">{{ userInfo.couponCount }}</span>

                        <el-button
                            link
                            type="primary"
                            @click="adjustCoupon(userInfo.id)"
                            v-perms="['system:coupon:available']"
                            >发放优惠券</el-button
                        >
                    </div>
                </div>
            </div>

            <el-form label-position="right" label-width="100px" :model="userInfo" class="mt-[20px]">
                <el-form-item label="用户编号:">
                    {{ userInfo.sn || '-' }}
                </el-form-item>
                <el-form-item label="用户昵称:">
                    {{ userInfo.nickname || '-' }}
                </el-form-item>
                <el-form-item label="账号:">
                    <div class="flex">
                        {{ userInfo.account || '-' }}
                        <popover-input
                            @confirm="handleUserInfoEdit($event, 'account')"
                            v-model="userInfo.account"
                            type="text"
                        >
                            <el-icon
                                style="vertical-align: middle"
                                color="#4A5DFF"
                                class="ml-[20px]"
                            >
                                <edit-pen />
                            </el-icon>
                        </popover-input>
                    </div>
                </el-form-item>
                <el-form-item label="真实姓名:">
                    <div class="flex">
                        {{ userInfo.realName || '-' }}
                        <popover-input
                            @confirm="handleUserInfoEdit($event, 'realName')"
                            v-model="userInfo.realName"
                            type="text"
                        >
                            <el-icon
                                style="vertical-align: middle"
                                color="#4A5DFF"
                                class="ml-[20px]"
                            >
                                <edit-pen />
                            </el-icon>
                        </popover-input>
                    </div>
                </el-form-item>
                <el-form-item label="性别:">
                    <div class="flex">
                        {{ userInfo.gender }}
                        <popover-user
                            @confirm="handleUserInfoEdit($event, 'gender')"
                            changeType="sex"
                            v-model="userInfo.gender"
                        >
                            <el-icon
                                style="vertical-align: middle"
                                color="#4A5DFF"
                                class="ml-[10px]"
                            >
                                <edit-pen />
                            </el-icon>
                        </popover-user>
                    </div>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <div class="flex">
                        {{ userInfo.mobile || '-' }}
                        <popover-input
                            @confirm="handleUserInfoEdit($event, 'mobile')"
                            v-model="userInfo.mobile"
                            type="text"
                        >
                            <el-icon
                                style="vertical-align: middle"
                                color="#4A5DFF"
                                class="ml-[10px]"
                            >
                                <edit-pen />
                            </el-icon>
                        </popover-input>
                    </div>
                </el-form-item>
                <el-form-item label="注册来源:">
                    {{ userInfo.channel || '-' }}
                </el-form-item>
                <el-form-item label="注册时间:">
                    {{ userInfo.createTime || '-' }}
                </el-form-item>
                <el-form-item label="最近登录时间:">
                    {{ userInfo.lastLoginTime || '-' }}
                </el-form-item>
            </el-form>
        </el-card>

        <el-card shadow="never" class="mt-[15px] !border-none" style="padding: 0 20px">
            <template #header>
                <span>TA的课程</span>
            </template>
            <el-table :data="courseList" style="width: 100%">
                <el-table-column property="id" label="id" width="120" />
                <el-table-column label="课程名称" min-width="240">
                    <template #default="scope">
                        <div class="goods-box flex items-center">
                            <div class="w-[80px]">
                                <el-image
                                    style="min-width: 80px; height: 60px"
                                    :src="scope.row.cover"
                                    :preview-src-list="[scope.row.cover]"
                                    :hide-on-click-modal="true"
                                    :preview-teleported="true"
                                    :fit="'contain'"
                                ></el-image>
                            </div>
                            <router-link
                                :to="`/order/detail?id=${scope.row.id}`"
                                class="ml-[10px] text-xs"
                            >
                                <div class="goods-name">{{ scope.row.name }}</div>
                            </router-link>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否免费" min-width="100">
                    <template #default="scope">
                        <div>
                            <el-tag class="ml-2" v-if="scope.row.feeType" type="warning"
                                >收费</el-tag
                            >
                            <el-tag class="ml-2" v-else type="success">免费</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="orderCreateTime" label="下单时间" min-width="100" />
                <el-table-column label="操作" min-width="200">
                    <template #default>
                        <div>{{ '-' }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
    <ls-user-coupon ref="couponRef" @close="initUserInfoFunc()"></ls-user-coupon>
    <ls-user-change ref="changeRef" @refresh="initUserInfoFunc()"></ls-user-change>
    <ls-user-integral ref="integralRef" @refresh="initUserInfoFunc()"></ls-user-integral>
</template>

<script lang="ts" setup>
import { getUserDetail, userEdit, apiUserCourseList } from '@/api/consumer'
import feedback from '@/utils/feedback'
import PopoverUser from '../components/popover-user.vue'
import LsUserChange from '../components/user-change.vue'
import LsUserCoupon from '../components/user-coupon.vue'
import LsUserIntegral from '../components/user-integral.vue'

/** Data Start **/
const route = useRoute()
const userInfo: any = ref({})
const courseList = ref()
const couponRef = shallowRef()
const changeRef = shallowRef()
const integralRef = shallowRef()
/** Data End **/

//初始化用户数据
const initUserInfoFunc = async (): Promise<void> => {
    const res: any = await getUserDetail({ id: route.query.id })
    userInfo.value = res
    courseList.value = await apiUserCourseList({ userId: route.query.id })
}

//编辑用户信息
const handleUserInfoEdit = async (event: string, type: string): Promise<void> => {
    if (event == undefined) {
        feedback.msgError('修改值为空！')
        return
    }
    await userEdit({
        id: userInfo.value.id,
        field: type,
        value: event
    })
    initUserInfoFunc()
}

//调整优惠券
const adjustCoupon = (id: any) => {
    couponRef.value.open(id)
}

//调整余额
const adjustBalance = (value: any, id: any) => {
    changeRef.value.onTrigger(value, id)
}

//调整积分
const adjustIntegral = (value: any, id: any) => {
    integralRef.value.onTrigger(value, id)
}

initUserInfoFunc()
</script>

<style lang="scss">
.card {
    padding: 0 60px;

    .header {
        height: 160px;
        padding: 30px 70px;
        box-sizing: border-box;
        background-color: var(--el-bg-color-page);

        &--item {
            padding: 10px 0;
            margin-left: 160px;
        }
    }
}
</style>


// Auto-generated function
const formatterAdjustCouponClock = (id: any) => {
    couponRef.value.open(id)
}

// Auto-generated function
const optimizerAdjustBalanceArranger = (value: any, id: any) => {
    changeRef.value.onTrigger(value, id)
}

// Auto-generated function
const enterpriseAdjustIntegralButton = (value: any, id: any) => {
    integralRef.value.onTrigger(value, id)
}

// Auto-generated function
const smartAdjustBalanceSnapshot = (value: any, id: any) => {
    changeRef.value.onTrigger(value, id)
}